<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 生产环境版本，优化了尺寸和速度 -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- 引入echarts -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.1/echarts.min.js"></script>
    <title>创新班第三组超级大数据面板2.0</title>
</head>
<body style="background-color:white;">
    <div id="app">
        <div class="head">
            <h1>创新班第三组电商大数据面板</h1>
            <h3>总销售额：{{total}}</h3>
        </div>
        <div class="xx-row-center">
            <div class="map">
                <div class="map1"><img style="width: 100%;" src="images/map/lbx.png"></div>
                <div class="map2"><img style="width: 100%;" src="images/map/jt.png"></div>
                <div class="map3"><img style="width: 100%;" src="images/map/map.png"></div>
            </div>
            <div id="main" style="width: 50%;height:50vh;"></div>
        </div>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                x_data: []
            },
            computed: {
                total() {
                    let res = 0
                    this.x_data.forEach(e => res += e)
                    return res
                }
            },
            mounted() {
                this.InitWebSocket("ws://127.0.0.1:8012/ws")
            },
            methods: {
                InitWebSocket(url) {
                    this.ws = new WebSocket(url)
                    this.ws.onopen = () => {
                        console.log("连上了~！")
                    }
                    this.ws.onmessage = (e) => {
                        console.log(JSON.parse(e.data))
                        this.makeData(JSON.parse(e.data))
                        this.drawEcharts()
                    }
                    this.ws.onerror = (e) => {
                        console.log(e)
                    }
                },
                /**
                 * 制作适合echats的数据
                 * @date 2021-06-10
                 * @param {any} data 涛哥的数据
                 * @returns {any}
                 */
                makeData(data) {
                    let y_data = []
                    let x_data = []
                    for (item of data) {
                        y_data.push(item.id)
                        x_data.push(item.value)
                    }
                    console.log(y_data, x_data)
                    this.y_data = y_data
                    this.x_data = x_data
                },
                drawEcharts() {
                    // 基于准备好的dom，初始化echarts实例
                    var myChart = echarts.init(document.getElementById('main'))
                    // 指定图表的配置项和数据
                    var option = {
                        textStyle: {
                            color: 'white'
                        },
                        title: {
                            text: '交易总价实时计算',
                            textStyle: {
                                color: 'white'
                            },
                            subtextStyle: {
                                color: 'white'
                            }
                        },
                        tooltip: {},
                        xAxis: {

                            data: this.y_data
                        },
                        yAxis: {},
                        series: [{
                            name: '总销售额',
                            type: 'bar',
                            data: this.x_data,
                            itemStyle: {
                                normal: {
                                    //这里是重点
                                    color: function (params) {
                                        //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                                        var colorList = ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#91c7ae', '#749f83', '#ca8622']
                                        return colorList[params.dataIndex]
                                    }
                                }
                            }
                        }]
                    }
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option)
                }
            }
        });
    </script>
    <style>
        .head{
            color: white;
            text-align: center;
            height: 60px;
            background: url(images/bg/head_bg.png) no-repeat center center;
            background-size: 100% 100%;
        }
        body{
            background-image: url("images/bg/bg.jpg");
        }
        @keyframes map_rotate {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
        @keyframes map_rotate2 {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(-360deg);
            }
        }
        .map{
            position: relative;
            width: 700px;
            height: 700px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .map1{
            position: absolute;
            z-index: 3;
            animation: map_rotate 20s linear infinite;
            width: 100%;
        }
        .map2{
            position: absolute;
            z-index: 2;
            animation: map_rotate2 20s linear infinite;
            width: 100%;
        }
        .map3{
            position: absolute;
            z-index: 1;
            width: 80%;
        }
        .xx-row-center{
            margin:10px;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }
    </style>
</body>
</html>



